<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<title>28种CSS3炫酷loading页面加载动画特效</title>
<link href="css/demo.css" rel="stylesheet" type="text/css" />
<link href="css/loaders.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- 代码 开始 -->
<main>
<div class="loaders">
  <div class="loader">
    <div class="loader-inner ball-pulse">
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
  <div class="loader">
    <div class="loader-inner ball-grid-pulse">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
  <div class="loader">
    <div class="loader-inner ball-clip-rotate">
      <div></div>
    </div>
  </div>
  <div class="loader">
    <div class="loader-inner ball-clip-rotate-pulse">
      <div></div>
      <div></div>
    </div>
  </div>
  <div class="loader">
    <div class="loader-inner square-spin">
      <div></div>
    </div>
  </div>
  <div class="loader">
    <div class="loader-inner ball-clip-rotate-multiple">
      <div></div>
      <div></div>
    </div>
  </div>
  <div class="loader">
    <div class="loader-inner ball-pulse-rise">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
  <div class="loader">
    <div class="loader-inner ball-rotate">
      <div></div>
    </div>
  </div>
  <div class="loader">
    <div class="loader-inner cube-transition">
      <div></div>
      <div></div>
    </div>
  </div>
  <div class="loader">
    <div class="loader-inner ball-zig-zag">
      <div></div>
      <div></div>
    </div>
  </div>
  <div class="loader">
    <div class="loader-inner ball-zig-zag-deflect">
      <div></div>
      <div></div>
    </div>
  </div>
  <div class="loader">
    <div class="loader-inner ball-triangle-path">
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
  <div class="loader">
    <div class="loader-inner ball-scale">
      <div></div>
    </div>
  </div>
  <div class="loader">
    <div class="loader-inner line-scale">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
  <div class="loader">
    <div class="loader-inner line-scale-party">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
  <div class="loader">
    <div class="loader-inner ball-scale-multiple">
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
  <div class="loader">
    <div class="loader-inner ball-pulse-sync">
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
  <div class="loader">
    <div class="loader-inner ball-beat">
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
  <div class="loader">
    <div class="loader-inner line-scale-pulse-out">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
  <div class="loader">
    <div class="loader-inner line-scale-pulse-out-rapid">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
  <div class="loader">
    <div class="loader-inner ball-scale-ripple">
      <div></div>
    </div>
  </div>
  <div class="loader">
    <div class="loader-inner ball-scale-ripple-multiple">
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
  <div class="loader">
    <div class="loader-inner ball-spin-fade-loader">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
  <div class="loader">
    <div class="loader-inner line-spin-fade-loader">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
  <div class="loader">
    <div class="loader-inner triangle-skew-spin">
      <div></div>
    </div>
  </div>
  <div class="loader">
    <div class="loader-inner pacman">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
  <div class="loader">
    <div class="loader-inner ball-grid-beat">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
  <div class="loader">
    <div class="loader-inner semi-circle-spin">
      <div></div>
    </div>
  </div>
</div>
</main>

<script>
document.addEventListener('DOMContentLoaded', function () {
  document.querySelector('main').className += 'loaded';
});
</script>

<br /><br /><br />
</body>
</html>